import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import { Form, Input, Button, notification, message, Tabs } from 'antd';
import { FormComponentProps } from "antd/lib/form/Form";
import { queryInfoById } from '../service';
import { BasisMessage, BuildMessage, PersonMessage, FireRoomMessage } from '../components/BasisMessage.js';

const TabPane = Tabs.TabPane;

interface Props extends FormComponentProps {
  dispatch?: Function,
  data?: {
    id: number
  },
  dict?: Object,
  match: {
    params: {
      id: any
    }
  }
}

@connect()
class FormItem extends Component<Props, any> {
  constructor(props) {
    super(props);
    this.state = {
      details: {},
      id: ''
    }
  }
  componentWillMount() {
    let hasMsg = message.loading('');
    const { match } = this.props;
    const { params } = match;
    this.setState({
      id: params.id
    });
    queryInfoById(params.id).then(data => {
      this.setState({
        details: data
      }, hasMsg)
    });
  }

  callback = (key) => {
  };

  render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 8 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 16 },
        sm: { span: 10 },
      },
    };
    return (
      <div>
        <Tabs defaultActiveKey="1" onChange={this.callback}>
          <TabPane tab="基础信息" key="1">
            {
              BasisMessage(Form, formItemLayout, this.state.details)
            }
          </TabPane>
          <TabPane tab="楼层列表" key="2">
            {
              BuildMessage(this.state.id)
            }
          </TabPane>
          <TabPane tab="消控室列表" key="3">
            {
              FireRoomMessage(this.state.id)
            }
          </TabPane>
          <TabPane tab="执行人员" key="4">
            {
              PersonMessage(this.state.id)
            }
          </TabPane>
        </Tabs>
        <div className="foo" style={{'margin': '10px 0 50px 50px'}}>
          <Link to='/data/unit_task_rules'>
            <Button style={{ marginLeft: '5%' }}>返回</Button>
          </Link>
        </div>
      </div>
    );
  }
}

const FormList01 = Form.create()(FormItem);
export default FormList01;
